<script>

import axios from 'axios';
import * as echarts from 'echarts';

    export default{
        data(){
            return{
                citys: ["北京","上海","郑州","长沙","广州","重庆","哈尔滨","武汉"],
                checked : [],
                chart:null,
                url:"http://39.106.84.74:8060/compare",
            }
        },
        mounted(){
            console.log("mount")
            if (echarts.getInstanceByDom(document.getElementById("compare")) == undefined){
                this.chart = echarts.init(document.getElementById("compare"));
            }
            this.getChart()
        },
        created() {
            this.$watch(() => this.checked,(newChecked, oldChecked) => {
                this.chart.clear()
                this.getChart()
            })
        },
        methods:{
            getChart(){
                axios.post(this.url,{
                    citys:this.checked
                },{
                    headers: {  
                        'Content-Type': 'application/json'  
                    }
                }).then((response)=>{
                    console.log(response.data)
                    this.chart.setOption(response.data)
                })
            }
        }
    }
</script>

<template>
    <el-checkbox-group v-model="checked" size="large">
      <el-checkbox-button v-for="city in citys" :key="city" :value="city">
        {{ city }}
      </el-checkbox-button>
    </el-checkbox-group>
    <div class="container2">
        <keep-alive>
            <div id="compare"></div>
        </keep-alive>
    </div>
    
    
</template>

<style>
    .container2{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 90%;
        justify-content: center;
        align-items: center;
    }
    #compare{
        width: 80%;
        height: 80%;
    }
</style>